<template>
  <div class="bpmn-toolbar">
    <bpmn-reback />
    <el-button-group>
      <bpmn-import />
      <bpmn-exports />
      <bpmn-previews />
    </el-button-group>
    <!--<bpmn-aligns /> -->
    <bpmn-scales />
    <!-- <bpmn-commands /> -->
    <!-- <bpmn-externals /> -->
  </div>
</template>

<script>
import BpmnReback from "./tools/Reback"
import BpmnImport from "./tools/Import";
import BpmnExports from "./tools/Exports";
import BpmnPreviews from "./tools/Previews";
// import BpmnAligns from "./tools/Aligns";
import BpmnScales from "./tools/Scales";
// import BpmnCommands from "./tools/Commands";
// import BpmnExternals from "./tools/Externals";
export default {
  name: "BpmnToolbar",
  components: { BpmnPreviews, BpmnExports, BpmnImport, BpmnReback, BpmnScales }
  // components: { BpmnExternals, BpmnCommands, BpmnScales, BpmnAligns, BpmnPreviews, BpmnExports, BpmnImport }
};
</script>

<style lang="scss" scoped>
.bpmn-toolbar {
  width: 100%;
  height: min-content;
  box-sizing: border-box;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  > div[class^='el-button-group'] + div[class^='el-button-group'] {
    margin-left: 16px;
  }

  .el-button__no-padding {
    padding: 0 15px;
    height: 32px;
  }
}
</style>
